<template>
	<view class="payment-container">
		<!-- 顶部插图 -->
		<view class="illustration-section">
			<view class="document-illustration">
				<view class="document-front">
					<view class="welcome-banner">WELCOME</view>
					<view class="checkmarks">
						<text class="checkmark">✓</text>
						<text class="checkmark">✓</text>
						<text class="checkmark">✓</text>
					</view>
					<view class="lines">
						<view class="line"></view>
						<view class="line"></view>
						<view class="line"></view>
						<view class="line"></view>
					</view>
				</view>
				<view class="pen-illustration">
					<view class="pen-body"></view>
					<view class="pen-tip"></view>
					<view class="pen-dash"></view>
				</view>
			</view>
		</view>

		<!-- 收银台标题 -->
		<view class="title-section">
			<text class="title">收银台</text>
		</view>

		<!-- 支付倒计时 -->
		<view class="timer-section">
			<text class="timer-label">剩余支付时间:</text>
			<view class="countdown-timer">
				<view class="time-block">{{ hours }}</view>
				<text class="time-separator">:</text>
				<view class="time-block">{{ minutes }}</view>
				<text class="time-separator">:</text>
				<view class="time-block">{{ seconds }}</view>
			</view>
		</view>

		<!-- 支付金额 -->
		<view class="amount-section">
			<text class="amount-label">支付金额</text>
			<text class="amount-value">¥{{ paymentAmount }}</text>
		</view>

		<!-- 分割线 -->
		<view class="divider"></view>

		<!-- 支付方式 -->
		<view class="payment-method-section">
			<text class="method-title">支付方式</text>
			<view class="payment-option" @click="selectWeChatPay">
				<view class="option-left">
					<view class="wechat-icon">
						<text class="wechat-bubble">💬</text>
						<text class="wechat-bubble">💬</text>
					</view>
					<text class="option-text">微信</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 确认支付按钮 -->
		<view class="confirm-button-section">
			<u-button @click="confirmPayment" text="确认支付" shape="circle" color="#FF6B35"
				:customStyle="buttonStyle"></u-button>
		</view>

		<!-- 支付选择弹窗 -->
		<u-popup :show="showPaymentPopup" mode="center" @close="closePaymentPopup">
			<view class="payment-popup">
				<!-- 关闭按钮 -->
				<view class="close-btn" @click="closePaymentPopup">
					<uni-icons type="close" size="20" color="#333"></uni-icons>
				</view>

				<!-- 成功图标 -->
				<view class="success-icon">
					<uni-icons type="checkmarkempty" size="40" color="#4CAF50"></uni-icons>
				</view>

				<!-- 标题 -->
				<view class="popup-title">订单支付</view>

				<!-- 发送到手机微信支付按钮 -->
				<view class="primary-button" @click="sendToWeChat">
					<text class="button-text">发送到手机微信支付</text>
				</view>

				<!-- 二维码支付链接 -->
				<view class="qr-payment-link" @click="qrCodePayment">
					<text class="link-text">二维码支付</text>
				</view>
			</view>
		</u-popup>

		<!-- 支付失败弹窗 -->
		<u-popup :show="showFailedPopup" mode="center" @close="closeFailedPopup">
			<view class="failed-popup">
				<!-- 失败消息 -->
				<view class="failed-message">
					<text class="message-text">支付失败,如果您已支付，请勿反复支付</text>
				</view>

				<!-- 确定按钮 -->
				<view class="confirm-button" @click="closeFailedPopup">
					<text class="confirm-text">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '', // 订单ID
				paymentAmount: '9.00',
				hours: '00',
				minutes: '35',
				seconds: '00',
				timer: null,
				selectedMethod: 'wechat',
				showPaymentPopup: false,
				showFailedPopup: false
			}
		},
		onLoad(options) {
			// 接收传递过来的订单ID和支付金额
			if (options.orderId) {
				this.orderId = decodeURIComponent(options.orderId);
			}
			if (options.amount) {
				this.paymentAmount = decodeURIComponent(options.amount);
			}
		},
	computed: {
		buttonStyle() {
			return {
				backgroundColor: '#FF6B35',
				color: '#FFFFFF'
			}
		}
	},
	mounted() {
		this.startTimer();
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	methods: {
		// 开始倒计时
		startTimer() {
			let totalSeconds = 35 * 60; // 35分钟

			this.timer = setInterval(() => {
				if (totalSeconds <= 0) {
					clearInterval(this.timer);
					uni.showToast({
						title: '支付超时',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					return;
				}

				const hours = Math.floor(totalSeconds / 3600);
				const minutes = Math.floor((totalSeconds % 3600) / 60);
				const seconds = totalSeconds % 60;

				this.hours = hours.toString().padStart(2, '0');
				this.minutes = minutes.toString().padStart(2, '0');
				this.seconds = seconds.toString().padStart(2, '0');

				totalSeconds--;
			}, 1000);
		},

		// 选择微信支付
		selectWeChatPay() {
			this.selectedMethod = 'wechat';
			uni.showToast({
				title: '已选择微信支付',
				icon: 'success'
			});
		},

		// 确认支付
		confirmPayment() {
			this.showPaymentPopup = true;
		},

		// 关闭支付弹窗
		closePaymentPopup() {
			this.showPaymentPopup = false;
			// 关闭支付弹窗后，显示支付失败弹窗
			this.showFailedPopup = true;
		},

		// 关闭失败弹窗
		closeFailedPopup() {
			this.showFailedPopup = false;
		},

		// 发送到手机微信支付
		async sendToWeChat() {
			uni.showLoading({
				title: '支付处理中...'
			});

			try {
				// 模拟支付处理延迟
				await new Promise(resolve => setTimeout(resolve, 2000));
				
				// 模拟支付成功
				uni.hideLoading();
				this.closePaymentPopup();

				// 显示支付成功提示
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					duration: 1500
				});

				// 延迟跳转，让用户看到成功提示
				setTimeout(() => {
					// 跳转到支付成功页面，传递订单ID
					const amount = encodeURIComponent(this.paymentAmount);
					const orderId = encodeURIComponent(this.orderId);
					uni.navigateTo({
						url: `/pages/zhifuchenggong/zhifuchenggong?amount=${amount}&orderId=${orderId}`
					});
				}, 1500);
				
			} catch (error) {
				uni.hideLoading();
				console.error('支付处理失败:', error);
				uni.showToast({
					title: '支付处理失败，请重试',
					icon: 'none'
				});
			}
		},
		
		// 二维码支付
		qrCodePayment() {
			uni.showToast({
				title: '二维码支付功能开发中',
				icon: 'none'
			});
			this.closePaymentPopup();
		},

		// 处理支付
		async processPayment() {
			uni.showLoading({
				title: '支付处理中...'
			});

			try {
				// 模拟支付处理延迟
				await new Promise(resolve => setTimeout(resolve, 2000));
				
				// 模拟支付成功
				uni.hideLoading();
				
				// 显示支付成功提示
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					duration: 1500
				});

				// 延迟跳转，让用户看到成功提示
				setTimeout(() => {
					// 跳转到支付成功页面
					const amount = encodeURIComponent(this.paymentAmount);
					const orderId = encodeURIComponent(this.orderId);
					uni.navigateTo({
						url: `/pages/zhifuchenggong/zhifuchenggong?amount=${amount}&orderId=${orderId}`
					});
				}, 1500);
				
			} catch (error) {
				uni.hideLoading();
				console.error('支付处理失败:', error);
				uni.showToast({
					title: '支付处理失败，请重试',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style scoped>
.payment-container {
	background-color: #ffffff;
	min-height: 100vh;
	padding: 40rpx;
}

/* 插图部分 */
.illustration-section {
	display: flex;
	justify-content: center;
	margin-bottom: 40rpx;
}

.document-illustration {
	position: relative;
	width: 200rpx;
	height: 150rpx;
}

.document-front {
	position: absolute;
	top: 0;
	left: 0;
	width: 160rpx;
	height: 120rpx;
	background-color: #E3F2FD;
	border-radius: 8rpx;
	padding: 15rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.welcome-banner {
	background-color: #2196F3;
	color: white;
	font-size: 20rpx;
	font-weight: bold;
	text-align: center;
	padding: 5rpx;
	border-radius: 4rpx;
	margin-bottom: 10rpx;
}

.checkmarks {
	display: flex;
	gap: 5rpx;
	margin-bottom: 10rpx;
}

.checkmark {
	color: #4CAF50;
	font-size: 16rpx;
	font-weight: bold;
}

.lines {
	display: flex;
	flex-direction: column;
	gap: 3rpx;
}

.line {
	height: 2rpx;
	background-color: #666;
	border-radius: 1rpx;
}

.pen-illustration {
	position: absolute;
	top: 20rpx;
	right: 0;
	width: 40rpx;
	height: 80rpx;
}

.pen-body {
	width: 6rpx;
	height: 60rpx;
	background-color: #F44336;
	border-radius: 3rpx;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.pen-tip {
	width: 0;
	height: 0;
	border-left: 3rpx solid transparent;
	border-right: 3rpx solid transparent;
	border-top: 8rpx solid #F44336;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.pen-dash {
	width: 20rpx;
	height: 2rpx;
	background-color: #FFC107;
	position: absolute;
	top: 30rpx;
	right: -10rpx;
	transform: rotate(45deg);
}

/* 标题部分 */
.title-section {
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

/* 倒计时部分 */
.timer-section {
	text-align: center;
	margin-bottom: 40rpx;
}

.timer-label {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 20rpx;
	display: block;
}

.countdown-timer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10rpx;
}

.time-block {
	background-color: #E3F2FD;
	border: 2rpx solid #2196F3;
	border-radius: 8rpx;
	padding: 15rpx 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #2196F3;
	min-width: 60rpx;
	text-align: center;
}

.time-separator {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

/* 金额部分 */
.amount-section {
	text-align: center;
	margin-bottom: 40rpx;
}

.amount-label {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 10rpx;
	display: block;
}

.amount-value {
	font-size: 48rpx;
	font-weight: bold;
	color: #F44336;
}

/* 分割线 */
.divider {
	height: 2rpx;
	background-color: #E0E0E0;
	margin: 40rpx 0;
}

/* 支付方式部分 */
.payment-method-section {
	margin-bottom: 60rpx;
}

.method-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
	display: block;
}

.payment-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #F0F0F0;
}

.option-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.wechat-icon {
	width: 60rpx;
	height: 60rpx;
	background-color: #4CAF50;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.wechat-bubble {
	color: white;
	font-size: 20rpx;
	position: absolute;
}

.wechat-bubble:first-child {
	top: 15rpx;
	left: 15rpx;
}

.wechat-bubble:last-child {
	bottom: 15rpx;
	right: 15rpx;
}

.option-text {
	font-size: 32rpx;
	color: #666666;
}

/* 确认按钮部分 */
.confirm-button-section {
	margin-top: 60rpx;
}

/* 按钮样式 */
:deep(.u-button) {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
}

/* 支付弹窗样式 */
.payment-popup {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 60rpx 40rpx 40rpx;
	width: 600rpx;
	position: relative;
}

.close-btn {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	padding: 10rpx;
}

.success-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 30rpx;
}

.popup-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 50rpx;
}

.primary-button {
	background-color: #4CAF50;
	border-radius: 12rpx;
	padding: 25rpx;
	margin-bottom: 30rpx;
	text-align: center;
}

.button-text {
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
}

.qr-payment-link {
	text-align: center;
	padding: 20rpx;
}

.link-text {
	color: #999999;
	font-size: 28rpx;
}

/* 支付失败弹窗样式 */
.failed-popup {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 60rpx 40rpx 40rpx;
	width: 500rpx;
	text-align: center;
}

.failed-message {
	margin-bottom: 40rpx;
}

.message-text {
	display: block;
	font-size: 28rpx;
	color: #666666;
	line-height: 1.6;
	margin-bottom: 10rpx;
}

.confirm-button {
	background-color: #4CAF50;
	border-radius: 12rpx;
	padding: 25rpx;
	text-align: center;
}

.confirm-text {
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
}
</style>
